<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传功能测试</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1>上传功能测试</h1>
        
        <div class="card">
            <div class="card-header">
                <h5>测试文件上传</h5>
            </div>
            <div class="card-body">
                <form id="testForm">
                    <div class="mb-3">
                        <label for="testFile" class="form-label">选择文件</label>
                        <input type="file" class="form-control" id="testFile" accept=".tif,.tiff,.png,.jpg,.jpeg">
                    </div>
                    
                    <div class="mb-3">
                        <label for="testName" class="form-label">名称</label>
                        <input type="text" class="form-control" id="testName" placeholder="输入名称">
                    </div>
                    
                    <button type="submit" class="btn btn-primary" id="testSubmit" disabled>
                        上传测试
                    </button>
                </form>
                
                <div id="testResult" class="mt-3"></div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            console.log('测试页面加载完成');
            
            $('#testFile').on('change', function(e) {
                console.log('文件选择变化');
                const file = e.target.files[0];
                if (file) {
                    console.log('选择的文件:', file.name, file.type, file.size);
                    $('#testResult').html(`
                        <div class="alert alert-info">
                            <strong>文件信息:</strong><br>
                            名称: ${file.name}<br>
                            类型: ${file.type}<br>
                            大小: ${(file.size / 1024 / 1024).toFixed(2)} MB
                        </div>
                    `);
                    $('#testSubmit').prop('disabled', false);
                    
                    if (!$('#testName').val()) {
                        $('#testName').val(file.name.replace(/\.[^/.]+$/, ""));
                    }
                }
            });
            
            $('#testForm').on('submit', function(e) {
                e.preventDefault();
                
                const file = $('#testFile')[0].files[0];
                const name = $('#testName').val();
                
                if (!file || !name) {
                    alert('请选择文件和输入名称');
                    return;
                }
                
                const formData = new FormData();
                formData.append('template_image', file);
                formData.append('name', name);
                formData.append('description', '测试上传');
                
                $.ajax({
                    url: '/upload_template_image',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        $('#testResult').html(`
                            <div class="alert alert-success">
                                <strong>上传成功!</strong><br>
                                底板ID: ${response.template_id}<br>
                                尺寸: ${response.width} x ${response.height}
                            </div>
                        `);
                    },
                    error: function(xhr) {
                        const response = xhr.responseJSON || {};
                        $('#testResult').html(`
                            <div class="alert alert-danger">
                                <strong>上传失败:</strong> ${response.error || '未知错误'}
                            </div>
                        `);
                    }
                });
            });
        });
    </script>
</body>
</html>
